<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>添加异常事项</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:10px 20px 30px;">
        <tips optionTemplate="diseaseAdd"></tips>
        <el-form :model="editForm" label-width="100px" ref="editForm">
          <el-form-item label="异常名称:" prop="name" v-if="deviceId=='add'">
            <el-input v-model="editForm.name" auto-complete="off" placeholder="异常名称（如：XX过敏）"></el-input>
          </el-form-item>
          <el-form-item label="注意事项:">
            <div v-if="careList.length">
              <div class="tag-line">
                  <span class="tag-line-list" @click="tagFn(item)"
                        :class="cate_id_list.indexOf(item.id)!==-1?'activeTag':''" v-for="item in careList"
                        :key="item.id"><i
                      class="iconfont"
                      :class="cate_id_list.indexOf(item.id)!==-1?'icondagou':'iconxuanzhongyuandian'"></i>{{
                      item.name
                    }}</span>
              </div>
              <div style="color: #999;line-height: 1.5;">所勾选的注意事项，将会提醒对应的各个单位</div>
            </div>
            <div v-else>
              没有注意事项可添加
            </div>
          </el-form-item>
          <el-form-item :label="item.name+'事项:'" prop="height" v-for="(item,index) in cate_id_item" :key="index">
            <div v-if="item.id==1" class="diseaseList">
              避免食用
              <el-tag
                  :key="tag"
                  v-for="tag in item.foodlist"
                  closable
                  :disable-transitions="false"
                  class="mr-5"
                  size="medium"
                  @close="handleClose(tag, index)">
                {{tag}}
              </el-tag>
              <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  placeholder="填写食物名称"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+ 添加避免食用的食物</el-button>
            </div>
            <el-input v-model="item.description" auto-complete="off" placeholder="填写异常说明"
                      type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button type="primary" size="small" @click="submitFormAdd()">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['visible', 'deviceId', 'attrOption'],
  components: {},
  data() {
    return {
      studentTitle: '',
      dialogVisible: this.visible,
      editForm: {
        name: '',// 	字符串 	必填 	1 	- 	名称
      }, // 编辑界面数据
      cate_id_list: [],
      cate_id_item: [], // 说明事项列表，填写说明，食用食物
      careList: [], // 获取到的注意事项
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      foodIndex: 0
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('详情页展示了', this.deviceId)
        this.editForm.cate_id = 0
        this.categroyFn()
      } else {
        this.careList = []
        this.cate_id_list = []
        this.cate_id_item = []
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  },
  created() {
  },
  methods: {
    async categroyFn() {
      let n = this;
      let data = await this.$fetch(this.api.Developmental.carefull.cate.index, {})
      if (!data.code) {
        if (this.deviceId !== 'add') {
          console.log('判断显示内容：', this.attrOption)
          let list = []
          for (let item of data.list.data) {
            item.foodlist = []
            item.description = ''
            if (n.attrOption.attrId.indexOf(item.id) === -1) {
              list.push(item)
            }
          }
          this.careList = n.common.getJson(list)
        } else {
          for (let item of data.list.data) {
            item.description = ''
            item.foodlist = []
          }
          n.careList = data.list.data
        }
      }
    },
    async submitFormAdd() {
      if (!this.editForm.name && this.deviceId === 'add') {
        this.$message.error('填写异常名称')
        return
      }
      if (!this.cate_id_list.length) {
        this.$message.error('选择注意事项')
        return
      }
      console.log('this.cate_id_list:',this.cate_id_list)
      console.log('cate_id_item', this.cate_id_item)
      let getData = {}
      let addCareful = {}
      let url = '';
      if (this.deviceId === 'add') {
        let dataOption = []
        url = this.api.Developmental.carefull.disease.add;
        for (let i in this.cate_id_item) {
          let newArray = {}
          newArray.id = this.cate_id_item[i].id
          newArray.description = this.cate_id_item[i].description
          newArray.list = this.cate_id_item[i].foodlist
          dataOption.push(newArray)
        }
        getData.name = this.editForm.name
        getData.data = JSON.stringify(dataOption)
      } else {
        url = this.api.Developmental.carefull.list.add;
        getData.disease_id = this.attrOption.id
        getData.cate_id = this.cate_id_item[0].id
        getData.description = this.cate_id_item[0].description || ''
      }
      console.log('提交的内容信息：', url, getData)
      // let cat = 1
      // if(cat){
      //   return
      // }
      let data = await this.$post(url, getData)
      if (!data.code) {
        this.$message.success(data.msg)
        for (let i in this.editForm) {
          this.editForm[i] = ''
        }
        this.$emit('beforePageFn')
        this.closePOpup()
      }else{
        this.$message.error(data.msg)
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
      for (let i in this.editForm) {
        this.editForm[i] = ''
      }
    },
    tagFn(option) {
      console.log('option:', option, this.cate_id_list)
      if (this.cate_id_list.indexOf(option.id) === -1) {
        this.cate_id_list.push(option.id) // 选中的id填充
        this.cate_id_item.push(option) // 选中的内容
      } else {
        this.cate_id_item.splice(this.cate_id_list.indexOf(option.id), 1)
        this.cate_id_list.splice(this.cate_id_list.indexOf(option.id), 1)
      }
    },
    handleClose(tag, index) {
      // cate_id_item foodlist
      this.cate_id_item[index].foodlist.splice(this.cate_id_item[index].foodlist.indexOf(tag), 1);
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput(index) {
      let that = this
      this.foodIndex = index
      this.inputVisible = true;
      this.$nextTick(_ => {
        that.$refs.saveTagInput[index].$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        console.log('this.foodIndex:', this.foodIndex, this.cate_id_item)
        this.cate_id_item[this.foodIndex].foodlist.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-boxin {
  min-height: 400px;
}

.tag-line-list {
  margin-right: 10px;
  border: 1px solid #eee;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.tag-line-list i {
  margin-right: 5px;
}

.activeTag {
  border: 1px solid #3e89ff;
  background: #e7f0ff;
}

.activeTag i, .activeTag {
  color: #3e89ff;

}
.diseaseList{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
  align-items: center;
}
.diseaseList .input-new-tag{
  max-width: 120px;
}
</style>


